<template>
  <div class="app-container">
    <div  style="width: 100vw;display: flex;justify-content: center;margin-top: 20px" >
      <div  style="width: 80vw;position: relative;" >
        <el-card >

          <div  >

            <div style="margin-top: 20px;margin-left: 20px;font-size: 20px;position: relative;">


              <div style="text-align: center; margin-top: 10px;font-weight: bolder;font-size: 32px">
               <span>{{ announcementdata.title }}</span>
              </div>
              <div style="text-align: center; margin-top: 10px;font-size: 15px">
                <span>{{ announcementdata.createTime }}</span>
              </div>


                <div v-html="announcementdata.content"></div>


            </div>

          </div>



        </el-card>

      </div>
    </div>


  </div>
</template>

<script>

import {getAnnouncement,} from "@/api/project/announcement";
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  name: "index",
  data() {
    return {
      title:"",
      announcementid:"",
      announcementdata:{},
      open:false,
      form: {},
      userInfo:{}
    }
  },
  computed: {
    processedContent() {
      if (!this.postList.content) return "";
      // 使用 DOMParser 解析富文本内容
      const parser = new DOMParser();
      const doc = parser.parseFromString(this.postList.content, "text/html");

      // 修改 <p> 标签样式
      const paragraphs = doc.querySelectorAll("p");
      paragraphs.forEach((p) => {
        p.style.textIndent = "2em"; // 首行缩进
        p.style.lineHeight = "2.0"; // 行高
        p.style.margin = "10px 0"; // 上下边距
        p.style.padding = "0 10px"; // 上下边距
      });

      // 修改 <img> 标签样式
      const images = doc.querySelectorAll("img");
      images.forEach((img) => {
        img.style.width = "250px"; // 图片宽度
        img.style.height = "auto"; // 高度自适应
        img.style.borderRadius = "8px"; // 圆角
        img.style.margin = "10px 0"; // 上下边距
      });

      // 返回处理后的 HTML 内容
      return doc.body.innerHTML;
    },
  },
  created() {
    this.announcementid = this.$route.query.id
    this.chushihua()
  },
  methods: {
    dianji(){
      window.open(this.announcementdata.operaFile, '_blank');

    },
    share(){
      // 获取完整的路由路径（包含查询参数等）
      const currentRoute = this.$route.fullPath;
      // 将路径拷贝到剪切板
      navigator.clipboard.writeText(window.location.origin + currentRoute)
          .then(() => {
            this.$message.success("分享链接已复制到剪切板！");
          })
          .catch(err => {
            this.$message.error(err);
          });
    },

    chushihua(){
      this.userInfo=JSON.parse(localStorage.getItem("userInfo"))
      getAnnouncement({id:this.announcementid}).then(res=>{
        this.announcementdata=res.data

      })
    },

  }
}
</script>

<style scoped>
.app-container{
  background-image: url('../../assets/back.jpg');
  background-size: 100%; /* 确保背景图片覆盖整个容器 */
  /*height: 100%; !* 设置高度为视口高度的100% *!*/
  min-height: 100vh;
  display: flex;





}
</style>
